<template>
	<div class="contents">
		<Headerc>个人中心</Headerc>
		<div class="content">
			<section class="userbg">
				<van-row type="flex" justify="center" class="center-mt">
					<van-col span="8" class="mycenter">
						<router-link to="/userinfo" tag="div" class="myImg">
							<img src="../assets/img/userimg1.jpg" alt="">
						</router-link>
						<p class="center-name">delion</p>
						<p class="center-name">资料未完善</p>
					</van-col>
				</van-row>
			</section>
			<section class="user-sel">
				<van-row>
					<van-col span="6" class="user-selg">
						<router-link to="/collection" tag="p">收藏</router-link>
					</van-col>
					<van-col span="6" class="user-selg">
						<router-link to="/cart" tag="p">购物车</router-link>
					</van-col>
					<van-col span="6" class="user-selg">
						<router-link to="/comment" tag="p">评论</router-link>
					</van-col>
					<van-col span="6" class="user-selg">
						<router-link to="/cartlist" tag="p">购物单</router-link>
					</van-col>
				</van-row>
				<van-row class="selmt">
					<van-col class="sellistrow">
						<van-cell title="装修状态" is-link class="sellist" to="/buildstatus"/>
						<van-cell title="关注的话题" is-link class="sellist" to="/focus"/>
						<van-cell title="设计师入住" is-link class="sellist" to="/designer"/>
						<van-cell title="设置" is-link class="sellist" to="/setup"/>
					</van-col>
				</van-row>
			</section>
		</div>
	</div>
</template>

<script>
import Headerc from './Headerc'
import Vue from 'vue'
import { Row, Col, Cell, CellGroup } from 'vant'
Vue.use(Row).use(Col).use(Cell).use(CellGroup)
export default {
	data () {
		return {}
	},
	components: {
		Headerc
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.userbg {
	@include rect(100%, 1.98rem);
	background: #f3f3f3;
}
.center-mt {
	margin-top: .15rem;
}
.mycenter {
	@include flexbox();
	@include flex-direction(column);
	@include justify-content();
	@include align-items();
}
.myImg {
	@include rect(.82rem, .82rem);
	@include border-radius(50%);
	border: 1px solid #ccc;
	box-sizing: border-box;
	// background: #f00;
	img {
		@include rect(.82rem, .82rem);
		@include border-radius(50%);
	}
}
.center-name {
	margin-top: .05rem;
}
.user-sel {
	@include rect(100%, .75rem);
	@include border(0 0 1px 0, #ccc, solid, null);
	.user-selg {
		height: .75rem;
		@include flexbox();
		@include justify-content();
		@include align-items();
		p {
			@include flexbox();
			@include justify-content();
			@include align-items();
			@include rect(.45rem, .45rem);
			@include border-radius(50%);
			font-size: .12rem;
			border: 1px solid #ccc;
		}
	}
}
.selmt {
	margin-top: .1rem;
}
.sellistrow {
	width: 100%!important;
}
.sellist:after {
	left: 0!important;
	border-bottom: 1px solid #ccc!important;
}
</style>
